<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-link style="width: 6%;" @click="gomycart()"> 返回购物车</el-link>
			<div style="width: 85%;"><p style="text-align: center;">确认订单</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		<div style="width: 80%;margin-left: 10%;">
			<el-card >
				<div style="width: 100%;">
					<el-table :data="data.com" border style="width: 100%">
						<el-table-column label="图片" >
							<template #default="carts">
								<el-link ><el-image :src="$ip+`/public/shows/`+carts.row.commodity.pic" />
								</el-link>
							</template>
						</el-table-column>
						<el-table-column prop="commodity.comname" label="商品名称"  />
						<el-table-column prop="commodity.comsn" label="商品编号"/>
						<el-table-column prop="commodity.price" label="商品价格"  />
						<el-table-column prop="price" label="商品总价"  />
					</el-table>
						<el-card>
							<div v-if="data.orde" style="width: 100%;height: 17rem;">
								<div style="width: 100%;height: 2rem;background-color: #C9C9C9;margin-top: -2rem;">
									<p>请确认并完善收货人信息</p>
								</div>
								&emsp;
								<div style="width: 100%;margin-left: 30%;">
									<el-form :model="data.user" :rules="rules" ref="formRef">
										<el-form-item label="姓名:" prop="uname">
											<el-input v-model="data.user.uname" placeholder="姓名" :prefix-icon="Cellphone" style="width: 20rem;margin-left: 1%;" />
										</el-form-item>
										<el-form-item label="手机号:" prop="phone">
											<el-input v-model="data.user.phone" placeholder="手机号" :prefix-icon="Cellphone" style="width: 20rem;" />
										</el-form-item>
										<el-form-item label="地址:" prop="address">
											<el-input
											    v-model="data.user.address"
											    style="width: 20rem;margin-left: 1%;"
											    :rows="3"
											    type="textarea"
											    placeholder="地址"
												:prefix-icon="UserFilled"
											  />
										</el-form-item>
									</el-form>
									<div style="margin-left: 50%;">
									<span>总价：{{prices()}}元</span>&emsp;
									<el-button type="danger" size="large" style="background-color: #E1337F;" @click="goorder()">确认下单</el-button>
									</div>
								</div>
							</div>
							
							
							<div v-if="data.orde==false" style="width: 100%;height: 17rem;">
								<div style="width: 100%;height: 2rem;background-color: #C9C9C9;margin-top: -2rem;">
									<p style="color: #E1337F;">请确认订单：订单号为：{{data.ordid}}</p>
								</div>
								&emsp;
								<div style="width: 100%;margin-left: 30%;">
									<el-form :model="data.user" :rules="rules" ref="formRef">
										<el-form-item label="姓名:" prop="uname">
											<el-input v-model="data.user.uname" placeholder="姓名" :prefix-icon="Cellphone" style="width: 20rem;margin-left: 1%;" disabled=""/>
										</el-form-item>
										<el-form-item label="手机号:" prop="phone">
											<el-input v-model="data.user.phone" placeholder="手机号" :prefix-icon="Cellphone" style="width: 20rem;" disabled=""/>
										</el-form-item>
										<el-form-item label="地址:" prop="address">
											<el-input
											    v-model="data.user.address"
											    style="width: 20rem;margin-left: 1%;"
											    :rows="3"
											    type="textarea"
											    placeholder="地址"
												:prefix-icon="UserFilled"
												disabled=""
											  />
										</el-form-item>
									</el-form>
									<div style="margin-left: 5%;display: flex;">
										<div style="margin-right: 35%;color: #E1337F;">订单下单成功，订单号为：{{data.ordid}}</div>
										<div>
											<span>总价：{{prices()}}元</span>&emsp;
											<el-button type="danger" size="large" style="background-color: #E1337F;" @click="gopayment()">去付款</el-button>
										</div>
									</div>
								</div>
							</div>
							
						</el-card>
				</div>
			</el-card>
		</div>
		
		
		
		</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import { User,Lock,Memo} from '@element-plus/icons-vue'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {success,warning,message,errors} from '../../store/alert.js'
		
		const data=reactive({
			com:[],
			user:{},
			price:0,
			orde:true,
			ordid:""
		})
		function gomycart(){
			store.state.com=[]
			router.push("/cus/mycart")
		}
		const prices = computed(() => {
			return function() {
				let price=0
				for (let i = 0; i < data.com.length; i++) {
				price=price+parseFloat(data.com[i].price)
				}
				data.price=price.toFixed(2)
				return price.toFixed(2);
			}
		})
		
		function gopayment(){
			router.push({
				path: '/payment',
				query: {
					ordid: data.ordid
				}
			})
		}
		
		function goorder(){
			let aa=[]
			for (let i = 0; i < data.com.length; i++) {
				let cart={cartid:""}
				
				cart.cartid=data.com[i].cartid
				aa.push(cart)
			}
				let s=new FormData()
				s.append("shipname",data.user.uname)
				s.append("shipphone",data.user.phone)
				s.append("shipadds",data.user.address)
				s.append("amount",parseFloat(data.price))
				for (let i = 0; i < data.com.length; i++) {
					s.append("orditems["+i+"].commodity.comid",data.com[i].commodity.comid)
					s.append("orditems["+i+"].num",data.com[i].num)
					s.append("orditems["+i+"].price",data.com[i].price)
					s.append("orditems["+i+"].user.uid",data.com[i].user.uid)
				}
				
			$postf("/cus/order/goadd",s).then((read)=>{
				console.log(read.data)
				if(read.data.code==401){
					errors(read.data.msg)
				}else{
					data.orde=false
					success(read.data.msg)
					data.ordid=read.data.data
				}
			})
			
		}
		onMounted(()=>{
			data.orde=true
			data.com=store.state.com
			data.user=store.state.user
		})
		
</script>

<style>
</style>
